const arr = [{
        "content": ["NHQ29835", "九江镇计划", "九江镇-河清村-鱼塘-1", "九江镇", "河清村", "6.9105	", "未采集", "初始状态", "", "", "审核"]

    },
    {
        "content": ["NHQ29835", "九江镇计划", "九江镇-河清村-鱼塘-1", "九江镇", "河清村", "6.9105	", "未采集", "初始状态", "", "", "审核"]
    }

]







function listshou() {
    let olist = document.querySelectorAll("#hide")
    let opageli = document.querySelectorAll(".list-page-ul")


    olist.forEach((time, index) => {
        time.index = index
        time.addEventListener("click", function (e) {
            //   e.stopPropagation()
            if (opageli[time.index].style.height == "0px") {
                // opageli[time.index].classList.add("list-page-ul-height")
                opageli[time.index].style.height = 168 + "px"
                // oLeft.style.marginTop="60px"
            } else {
                // opageli[time.index].classList.remove("list-page-ul-height")
                opageli[time.index].style.height = 0 + "px"
                // oLeft.style.marginTop="0px"
            }
        })
    });


    console.log(olist);
}


listshou()
// 这里肯定要重新这玩意

function shou() {
    let oLeft = document.querySelector(".Left")
    let oul = document.querySelectorAll(".list li")
    let omain = document.querySelectorAll(".main")
    console.log(omain);
    oul.forEach((time, index) => {
        time.id = index
        time.addEventListener("click", function () {


            // debugger
            clean()
            // console.log(time.id);
            switch (parseInt(time.id)) {
                case 0:
                    omain[0].style.display = "block"
                    Api.tasks(plan, page = 1, size = 10)

                    function plan(data, len, strip = 10) {
                        // var  arr=data
                        $(".table").eq(0).siblings().remove()
                        data.forEach((time, index) => {
                            var info_box = document.querySelector(".info_box")
                            odiv = ` <div class="table">
                                        <div class="content">
                                             <ul>
                                                 <li>${time.id}</li>
                                                 <li>${time.planName}</li>
                                                 <li>${time.planStartTime}</li>
                                                 <li>${time.planEndTime}</li>
                                                 <li>${time.planStatus}</li>
                                                 <li>${time.planRequire}</li>
                                           </ul>
                                           <div id="hope"> <span>发布</span> <span>撤回</span> <span>查看</span> <span>编辑</span> </div>
                                           </div>
                                     </div>`
                            info_box.insertAdjacentHTML("beforeend", odiv)
                        })
                        var sum = document.querySelector("#sum")
                        sum.innerHTML = len
                        // console.log($(".listbtn").eq(0).children().length);
                        //  动态的创造li按钮
                        if (!$(".listbtn").eq(0).children().length) {

                            for (let i = 1; i < Math.ceil(len / strip) + 1; i++) {
                                $(".listbtn").eq(0).append(`<li><b>${i}</b></li>`)
                            }
                            //给自己的提示 如果长度相等 else if($(".listbtn").eq(0).children().length!=Math.ceil(len / strip))
                        } else if ($(".listbtn").eq(0).children().length != Math.ceil(len / strip)) {
                            // debugger
                            $(".listbtn").eq(0).children().remove()
                            for (let i = 1; i < Math.ceil(len / strip) + 1; i++) {
                                $(".listbtn").eq(0).append(`<li><b>${i}</b></li>`)
                            }
                        } else {
                            //清除所有事件
                            $('.listbtn li').unbind()
                        }
                        // li 1 2 3 切换
                        $(".listbtn li").on("click", function () {
                            Api.tasks(plan, $(this).text(), $("#strip").val())
                            $(this).css("background", "#18a3ff").siblings().css('background', '')
                        })
                        //控制li个数
                        $("#text_page").on("change", function () {
                            Api.tasks(plan, $(this).val(), $("#strip").val())
                        })

                    }
                    //选择页
                    $("#strip").on("change", function () {
                        Api.tasks(plan, $(this).val(), $(this).val())

                    })

                    function tabupdwon() {
                        var getbtn_up = document.getElementById("getbtn_up")
                        var get_down = document.getElementById("get_down")
                        var count = 0
                        get_down.onclick = function () {
                            count++
                            Api.tasks(plan, count, $("#strip").val())
                            if (count == $(".listbtn").eq(0).children().length) {
                                count = 0
                            }
                            console.log($(".listbtn").eq(count));
                            // $(".listbtn").eq(count)

                        }
                        getbtn_up.onclick = function () {
                            count--
                            if (count == -1 || count == 0) {
                                count = $(".listbtn").eq(0).children().length
                            }
                            Api.tasks(plan, count, $("#strip").val())

                        }
                    }
                    tabupdwon()







                    break;
                case 1:
                case 2:


                    omain[1].style.display = "block"
                    break;
                case 3:
                case 4:
                case 5:
                case 6:
                case 7:
                case 8:
                    omain[2].style.display = "block"
                    Api.tasks(selecttask, page = 1, size = 20)

                    function selecttask(plandata, len, size) {
                        //    console.log(plandata, len ,size);
                        $(".card-content h3").eq(0).siblings().remove()
                        plandata.forEach((time, index) => {
                            $(".card-content").append(`  <div class="active">
                            <div>${index+1}-${time.planName} / ${time.dataCount}</div>
                            <button data-id=${time.id}>未选中</button>
                        </div>`)
                        });
                        $(".active button").on("click", function () {
                            $(".active button").text("未选中")
                            $(".active div").removeAttr("style")
                            $(".active button").removeAttr("style")
                            $(this).css({
                                "background-color": " chartreuse",
                                "color": "#ffffff"
                            })
                            $(this).siblings().css({
                                "background-color": "#f0f9eb",
                                "color": "#67C23A"
                            })
                            $(this).text("已选中")
                            var id = $(this).attr("data-id")
                            Api.alldata(screen, id, size = 10, page = 1)

                            function screen(screendata, sum, id, tias, page) {

                                var tiaoshu = tias
                                var steps = page
                                oid = id
                                var osum = document.querySelector("#sum_3")

                                osum.innerHTML = sum
                                $("#tbody").children().remove()
                                screendata.forEach(time => {
                                    $("#tbody").append(` <tr>
                                    <td><input type="checkbox"> </td>
                                    <td>${time.landId}</td>
                                    <td>${time.planName}</td>
                                    <td>${time.landName} </td>
                                    <td>${time.landTownName} </td>
                                    <td>${time.landVillageName} </td>
                                    <td>${time.landProductArea}</td>
                                    <td>${time.collectStatus}</td>
                                    <td>${time.auditStatus} </td>
                                    <td>${time.createPerson}</td>
                                    <td>${time.createTime}</td>
                                    <td> 审核</td>
        
                                </tr>`)
                                });

                                $("#pager").zPager({
                                    // totalData: 50,
                                    htmlBox: $('#wraper'),
                                    btnShow: true,
                                    ajaxSetData: false,
                                    totalData: sum, //数据总条数
                                    pageData: tiaoshu, //每页数据条数
                                    pageCount: Math.ceil(sum / tiaoshu), //总页数
                                    current: page, //当前页码数
                                    pageStep: 8, //当前可见最多页码个数
                                    minPage: 5, //最小页码数，页码小于此数值则不显示上下分页按钮
                                    active: 'current', //当前页码样式
                                    prevBtn: 'pg-prev', //上一页按钮
                                    nextBtn: 'pg-next', //下一页按钮
                                    btnBool: true, //是否显示上一页下一页
                                    firstBtn: 'pg-first', //第一页按钮
                                    lastBtn: 'pg-last', //最后一页按钮
                                    btnShow: true, //是否显示第一页和最后一页按钮
                                    disabled: true, //按钮失效样式

                                });

                                nans("#pager", Api.alldata, screen, oid)
                                //第一页
                                $(".pg-first").eq(0).on("click", function () {


                                    steps = 1
                                    Api.alldata(screen, oid, tiaoshu, steps)
                                })

                                //最后一页pg-last
                                $(".pg-last").eq(0).on("click", function () {
                                    steps = Math.ceil(sum / tiaoshu)
                                    Api.alldata(screen, oid, tiaoshu, steps)
                                })
                                // 下一页
                                $(".pg-next").eq(0).on("click", function () {
                                    steps++
                                    Api.alldata(screen, oid, tiaoshu, steps)
                                })
                                // 上一页
                                $(".pg-prev").eq(0).on("click", function () {
                                    steps--
                                    Api.alldata(screen, oid, tiaoshu, steps)
                                })

                                // 选择显示几条


                            }
                            $("#strip_1").on("change", function () {

                                Api.alldata(screen, oid, $(this).val(), 1)
                            })


                            //选择跳转第几页
                            $("#Jump_2").eq(0).on("change", function () {

                                Api.alldata(screen, oid, tiaoshu, $(this).val())
                            })











                        })





                    }






                    break;

                default:
                    break;
            }


        })

    });
    // 切换清除隐藏

    function clean() {
        omain.forEach(element => {
            element.style.display = "none"

        })
    }

}

shou()
// 切换清除隐藏

// 这里肯定要重新这玩意



// 拟态框
function _mimicry() {
    var lowpasswordbox = document.querySelector("#lowpasswordbox")
    var minicry = document.querySelector("#minicry")
    var ceragebtn = document.querySelector("#ceragebtn")
    lowpasswordbox.addEventListener("click", function (e) {
        e.stopPropagation();

    })
    minicry.addEventListener("click", function () {
        this.style.display = "none"
    })
    ceragebtn.addEventListener("click", function () {
        minicry.style.display = "block"
    })
}
// 
_mimicry()


// 分页切换按钮函数
function nans(obj, fn, fn2, id) {
    $(obj).children().each(function () {

        if ($(this).text()) {

            $(this).on("click", function () {
                fn(fn2, id, tiaoshu, $(this).text())
                // Api.querysubject(subject,size = 10, $(this).text())
                // Api.massif(cremassif, size = 10, $(this).text())
            })
        }
    })
}